<template>
  <view class="my_news_con">
    <view class="news_item" v-for="(item,index) in my_news_list" :key="index" @click="gotoweb(item.content)">
      <view class="time">
        <text class="month">{{item.create_time.slice(5,7)}}月</text>
        <text class="day">{{item.create_time.slice(8,10)}}日</text>
      </view>
      <view class="content">
        <view class="title">
          {{item.title}}
        </view>
        <image :src="item.news_pics_set[0]"  ></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        my_news_list:[{
          month:'5',
          day:'20',
          title:'“崇本拓新，向海图强”拔尖计划2.0全国线上书院',
          src:"../../static/news/news_center.png",
          link:"https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg"
        },
        {
          month:'5',
          day:'20',
          title:'“崇本拓新，向海图强”拔尖计划2.0全国线上书院',
          src:"../../static/news/news_center.png"
        },
        {
          month:'5',
          day:'20',
          title:'“崇本拓新，向海图强”拔尖计划2.0全国线上书院',
          src:"../../static/news/news_center.png"
        },]
      };
    },
    onLoad() {
      this.getNews()
    },
    methods:{
      gotoweb(url){
        wx.navigateTo({
          // 跳转到webview页面
          url: `/pages/webview/webview?url=${url}`,
        });
      },
      async getNews() {
        const {
          data: res
        } = await uni.$http.get('/self/news-ids')
        if (res.code != 1000) return uni.$showMsg()
        this.my_news_list=res.data.news
      },
    }
  }
</script>

<style lang="scss">
.my_news_con{
  .news_item{
    margin: 15px auto;
    width: 336px;
    height: 140px;
    border-radius: 10px 10px 10px 10px;
    background-color: white;
    padding-left: 20px;
    padding-top: 5px;
    .time{
      .month{
        font-size: 20px;
      }
      .day{
        font-size: 15px
      }
    }
    .content{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 313px;
      height: 96px;
      margin-top: 3px;
      border-radius: 8px 8px 8px 8px;
      background-color: rgba(225, 227, 230, 100);
      .title{
        width: 158px;
        height: 62px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      image{
        width: 102px;
        height: 63.6px;
      }
    }
  }
}
</style>
